<template>
  <div>
    <el-form
      :inline="true"
      class="demo-form-inline"
      @submit.native.prevent="find"
    >
      <el-form-item label="起点" class="start_position">
        <el-cascader
          size="large"
          :options="options_position"
          v-model="selectedOptions1"
          @change="handleChange1"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="终点" class="end_positon">
        <el-cascader
          size="large"
          :options="options_position"
          v-model="selectedOptions2"
          @change="handleChange2"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="日期">
        <el-select @change="selectGet" v-model="value" placeholder="请选择时间">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="方式">
        <el-select @change="selectGet" v-model="way" placeholder="请选择乘坐方式">
          <el-option
            v-for="item in ways"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="ticket_table">
      <el-table :data="find_items" v-model="find_items" v-loading="loading">
        <!-- <el-table-column prop="date" label="日期" width="140">
        </el-table-column> -->
        <el-table-column prop="name" label="班次名称"> </el-table-column>
        <el-table-column prop="start_position" label="起点"> </el-table-column>
        <el-table-column prop="end_position" label="终点"> </el-table-column>
        <el-table-column prop="start_date" label="出发时间"> </el-table-column>
        <el-table-column prop="end_date" label="到达时间"> </el-table-column>
        <el-table-column prop="money" label="价格"> </el-table-column>
        <el-table-column prop="left" label="余票"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="buy(scope.row._id)"
              >预定</el-button
            >
            <!-- <el-button type="text" size="small" @click="remove(scope.row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-backtop
      target=".page-component__scroll .el-scrollbar__wrap"
    ></el-backtop>
  </div>
</template>

<script>
import { provinceAndCityData, CodeToText } from 'element-china-area-data'
export default {
  data() {
    return {
      html: {},
      value: '',
      options: [{
        value: '选项1',
        label: '七天内'
      }, {
        value: '选项2',
        label: '三天内'
      }, {
        value: '选项3',
        label: '默认'
      }],
      way: '',
      ways: [{
        value: '单程',
        label: '单程'
      }, {
        value: '往返',
        label: '往返'
      }, {
        value: '接续',
        label: '接续'
      }],
      username: {
        name: "陈昀昊"
      },
      find_items: [],
      findFlight: {},
      time_show_start: [],
      time_show_end: [],
      options_position: provinceAndCityData,
      selectedOptions1: [],
      selectedOptions2: [],
      loading: false
    }
  },

  created() {
    this.fetch_info()
  },
  methods: {
    selectGet() {
    },
    onSubmit() {
    },
    fetch_info() {
      console.log(this.$cookies.get('info').start_position)
      console.log(this.$cookies.isKey('info'))
      if (this.$cookies.isKey('info')) {
        this.value = this.$cookies.get('info').date
        this.findFlight.start_position = this.$cookies.get('info').start_position
        this.selectedOptions1 = this.$cookies.get('info').selectedOptions1
        this.findFlight.end_position = this.$cookies.get('info').end_position
        this.selectedOptions2 = this.$cookies.get('info').selectedOptions2
        this.way = this.$cookies.get('info').way
        console.log(this.value)
        console.log(this.findFlight.start_position)
        console.log(this.findFlight.end_position)
        this.find()
      }

    },
    async	find() {
      let res
      this.loading = true
      if (this.value === '选项3' || undefined) {
        this.findFlight.value = '选项3'
      }
      else if (this.value === '选项2') {
        this.findFlight.value = '选项2'
      } else if (this.value === '选项1') {
        this.findFlight.value = '选项1'
      }

      if (this.way === '单程' || undefined) {
        this.findFlight.way = '单程'
      }
      else if (this.way === '往返') {
        this.findFlight.way = '往返'
      } else if (this.way === '接续') {
        this.findFlight.way = '接续'
      }
      res = await this.$http.post('rest/flights', this.findFlight)
      //const res = await this.$http.get('rest/flights')

      this.find_items = res.data
      this.find_items.forEach((time, index) => {
        time.start_date = this.$moment(time.start_date).format('YYYY-MM-DD HH:mm:ss')
        time.end_date = this.$moment(time.end_date).format('YYYY-MM-DD HH:mm:ss')
        console.log(this.time_show)
      })
      this.loading = false
      // console.log(this.$moment('2019-06-29T00:00:00.000Z').format('YYYY-MM-DD HH:mm:ss'))
      //   console.log(this.find_items)
    },
    async buy(flights_id) {
      //   console.log(flights_id)
      const result = await this.$http.get('rest/flights')
      const id_card = result.data.id_card
      //   console.log(id_card + '0000999')
      if (id_card === '' || id_card === undefined) {
        this.$message({
          type: 'error',
          message: '请先完善身份信息！'
        })
        return
      }
      let res = null
      res = await this.$http.put(`rest/flights/${flights_id}`)
      if (this.$cookies.isKey('id')) {
        const res = await this.$http.delete(`rest/buys/${this.$cookies.get('id').id}`)
        this.$cookies.remove("id")
        this.$message({
        type: 'success',
        message: '改签成功！'
      })
      }
      else{
        this.$message({
        type: 'success',
        message: '预定成功！'
      })
      }
      this.find()
    },
    handleChange1(value) {
      this.findFlight.start_position = CodeToText[value[1]]
    },
    handleChange2(value) {
      this.findFlight.end_position = CodeToText[value[1]]
    }
  }
}
</script>

<style>
.demo-form-inline {
  margin-left: 23%;
  margin-top: 3%;
  margin-bottom: 1%;
}
.ticket_table {
  min-height: 600px;
}
</style>